<template>
<span>
  <div class="flex">
    <template v-for="item in marks">
      <div class="ivu-card mx-2px flex-1 w-200px h-100px centerY" :style="{backgroundColor:item.color,opacity:0.6,display:'flex'}">
        <div :class="{'gas w-30px h-30px bg-img-cover mx-10px':true}"></div>
        <p>abc</p>
      </div>
    </template>
    
  </div>
  <grid-layout 
    :layout.sync="cloneLayout"
    :col-num="colNum"
    :row-height="rowHeight"
    :is-draggable="editable"
    :is-resizable="editable"
    :vertical-compact="true"
    :use-css-transforms="true"
    class="w-100 h-100"
    >
    <grid-item v-for="(item,index) in cloneLayout" :key="index"
      :static="!editable"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :style="{'touch-action': 'none'}"
    >
    <Card class="w-100 h-100" v-if="item.w>30||item.h>7">
      <p slot="title" @dblclick="cloneLayout.splice(index,1,tools.lodash.cloneDeep(layout[index]))"> {{item.title}}</p>
      {{`aaa${item.w},${item.h}`}}
    </Card>

    <Card class="w-100 h-100" v-else>
      <div slot="title" class="flex centerY">
        <div :class="{'gas':item.type==='gas','w-30px h-30px bg-img-cover mr-10px':true}"></div>
        <p>{{item.title}}</p>
      </div>
      <div class="w-100 h-100 flex centerY" :style="{height:(rowHeight*item.h-55)+'px'}">
        <div :class="{'gas':item.type==='gas','w-30px h-30px bg-img-cover':true}"></div>
        <div class="h-100 flex-1 px-10px">
          {{`bbb${item.w},${item.h}`}}
        </div>
      </div>
    </Card>
    </grid-item>
  </grid-layout>
</span>  
</template>

<script>
import screenFull from 'screenfull';
import VueGridLayout from 'vue-grid-layout';
export default {
  name:'',
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  },
  data() {
    return {
      rowHeight:100,
      colNum:100,
      editable:true,
      layout:[
        {"x":0,"y":0,"w":25,"h":3,"i":"0",title:'abc-0',type:'gas'},
        {"x":25,"y":0,"w":25,"h":3,"i":"1",title:'abc-1'},
        {"x":50,"y":0,"w":25,"h":3,"i":"2",title:'abc-2'},
        {"x":75,"y":0,"w":25,"h":3,"i":"3",title:'abc-3'},
        {"x":0,"y":4,"w":25,"h":3,"i":"4",title:'abc-4'}
      ],
      cloneLayout:[

      ],
      marks:[
        {color:'red'},
        {color:'yellow'},
        {color:'blue'},
        {color:'green'},
        {color:'red'},
        {color:'yellow'},
        {color:'blue'},
        {color:'green'},
      ]
    }
  },
  props: {
    config:{
      default:()=>{
        return {
            editable: true,
            layout:[
              
            ]
        }
      }
    }
  },
  watch: {},
  computed: {
    
  },
  created() {},
  mounted() {
    console.log(this)
    this.cloneLayout = this.tools.lodash.cloneDeep(this.layout)
  },
  methods: {
  }
};
</script>
<style scoped lang="scss">
.gas {
  background-image: url("./燃气.png");
}
.card-body {
  ::v-deep .ivu-card-body {
    height:calc(100% - 55px)
  }
}
.blue-glass {
  /* display: none; */
  width: 400px;
  height: 200px;
  position: absolute;
  background-color: rgba(100, 149, 237, 0.5); /* 半透明的蓝色背景 */
  backdrop-filter: blur(5px); /* 应用模糊效果 */
  border-radius: 10px; /* 圆角边框 */
  padding: 20px; /* 内边距 */
  color:white;
  font-size: 20px;
}
.blue-side {
  /* display: none; */
  width: 250px;
  height: 300px;
  background-color: rgba(100, 149, 237, 0.5); /* 半透明的蓝色背景 */
  border-radius: 10px; /* 圆角边框 */
  padding: 20px; /* 内边距 */
  color:white;
  font-size: 20px;
}
.left-side {
  position: absolute;
  left: 0px;
  top:0px;
  justify-content: space-between;
  padding:20px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.right-side {
  position: absolute;
  right: 0px;
  top:0px;
  justify-content: space-between;
  padding:20px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 4s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>